﻿@model IEnumerable<MatchSearchResultViewModel>

@{ ViewBag.Title = "Match search"; }

@{
    var routeData1 = ViewContext.RouteData.Values.Where(r => r.Key == "id1");
    string controlValue1 = routeData1.Any() ? routeData1.FirstOrDefault().Value.ToString() : string.Empty;

    var routeData2 = ViewContext.RouteData.Values.Where(r => r.Key == "id2");
    string controlValue2 = routeData2.Any() ? routeData2.FirstOrDefault().Value.ToString() : string.Empty;
}

<section>
    <div class="grid_12 clearfix">
    
        <h2>@ViewBag.Title</h2>

    </div>
                
    <div class="grid_4">
        @(Html.Kendo().AutoComplete()
            .Name("team1AutoComplete")
            .Filter("contains")
            .MinLength(2)
            .Placeholder("Start typing a team name...")
            .Value(controlValue1)
            .HtmlAttributes(new { style = "width:300px" })
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetTeamsJSON", "Search")
                        .Data("onAdditionalData1");
                })
                .ServerFiltering(true);
            })
            .Events(e => e
                .Change("team1AutoComplete_onChange")
            )
        )
    </div>
            
    <div class="grid_8 clearfix">
        @(Html.Kendo().AutoComplete()
            .Name("team2AutoComplete")
            .Filter("contains")
            .MinLength(2)
            .Placeholder("Start typing a team name...")
            .Value(controlValue2)
            .HtmlAttributes(new { style = "width:300px" })
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetTeamsJSON", "Search")
                        .Data("onAdditionalData2");
                })
                .ServerFiltering(true);
            })
            .Events(e => e
                .Change("team2AutoComplete_onChange")
            )
        )
    </div>

    @if (Model != null)
    {
        <div class="grid_12 clearfix">
            @foreach (var item in Model)
            {
                Html.DisplayFor(m => item);
            }
        </div>
    }
    
</section>

<script type="text/javascript">
    var team1Picked = false;
    var team2Picked = false;

    function onAdditionalData1()
    {
        return { text: $("#team1AutoComplete").val() };
    }

    function onAdditionalData2() {
        return { text: $("#team2AutoComplete").val() };
    }

    function team1AutoComplete_onChange()
    {
        team1Picked = onAdditionalData1().text.length > 0;

        if (team1Picked == true && team2Picked == true) {
            var url = '@Url.Action("Index", new { id1 = "__REPLACE1__", id2 = "__REPLACE2__" })';
            url = url.replace('__REPLACE1__', $("#team1AutoComplete").val());
            window.location.href = url.replace('__REPLACE2__', $("#team2AutoComplete").val());
        }
    }

    function team2AutoComplete_onChange()
    {
        team2Picked = onAdditionalData2().text.length > 0;

        if (team1Picked == true && team2Picked == true) {
            var url = '@Url.Action("Index", new { id1 = "__REPLACE1__", id2 = "__REPLACE2__" })';
            url = url.replace('__REPLACE1__', $("#team1AutoComplete").val());
            window.location.href = url.replace('__REPLACE2__', $("#team2AutoComplete").val());
        }
    }
</script>

